<template>
  <div>
    <div class="aboutus">
        <img src="../../assets/articles.png" alt="" style="width: 310px; height: 54px"/>
    </div>
    <div style="display: flex; justify-content: center">
      <div class="Outerlayer">
        <div v-for="item in ArticlesList" :key="item.id" class="cemeterylist">
          <img :src="imgurl + item.goods_image" alt="" class="cemeterypic" />
          <div class="titl">{{ item.goods_name }}</div>
        </div>
      </div>
    </div>
    <div class="paging">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :page-sizes="[8]"
        :page-size="2"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Total"
       
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            ArticlesList:[],
            imgurl: "https://www.gongminlingyuanwang.cn/",
            Total: 0,
            currentPage: 1,
            pagesize: 8,
        }
    },
    created(){
        this.getArticlesList(1)

    },
    methods: {
        // 获取商品列表
        async getArticlesList(page){
            const { data: res } = await this.$axios.get("index/getGoods",{
              pageSize: 8,
              page:page,
            });
            if(res.code!=1) return this.$message.error('暂无数据')
            this.Total = res.data.total
            this.ArticlesList = res.data.data
            console.log(this.ArticlesList)

        },
        handleSizeChange(size) {
            this.pagesize = size
        },
        handleCurrentChange(currentPage) {
            //当前是哪一页
            this.currentPage = currentPage
            this.getpicList(currentPage) 
        },
       
    }

}
</script>

<style>

</style>